"use client";

import styles from "./NameInput.module.scss";
import { useState, useEffect, useRef } from "react";

interface InputProps {
  placeholder: string;
  buttonText: string;
  callback: (data: string) => void;
}

// 这是输入框组件
function NameInput(InputProps: InputProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [data, setData] = useState<string>("");
  const handleClick = () => {
    InputProps.callback(data);
    setData("");
    console.log(data);
  };

  return (
    <div className={styles.container}>
      <input
        ref={inputRef}
        className={styles.input}
        type="text"
        value={data || ""}
        onChange={(e) => setData(e.target.value)}
        placeholder={InputProps.placeholder}
      />
      <button className={styles.button} onClick={handleClick}>
        {InputProps.buttonText}
      </button>
    </div>
  );
}

export default NameInput;
